<template>
    <el-container>
        <el-aside width="" style="background-color: rgb(238, 241, 246)">
            <admin-menu :isCollapse="isHide"></admin-menu>
        </el-aside>
        <el-container>
            <el-header class="header" height="50px">
                <div class="switch center-flex-box" @click="isHide=!isHide">
                    <icon-font class="hide" v-if="isHide" href="#ceyou"></icon-font>
                    <icon-font class="hide" v-else href="#cezuo"></icon-font>
                </div>
                <div class="nav-bar">
                    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item v-for="(url,index) in urls" :key="index" :to="{ path: url.path }">
                            {{url.title}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="title">
                    CLOUD EASY MANAGEMENT SYSTEM
                </div>
                <div class="home">
                    <el-button @click="goToHome">回到主页</el-button>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import AdminMenu from './adminMenu'
    import { adminUrlParseMap } from '@/constant'

    export default {
        name: 'admin',
        components: {
            AdminMenu
        },
        data () {
            return {
                isHide: false,
                tab: '',
                tabs: [{
                    title: '首页',
                    name: '1',
                    content: 'Tab 1 content'
                }],
                urls: []
            }
        },
        mounted () {
            this.getEnablePermissionsAction(this.getUser.account).then(data => {
                this.action(this.setEnablePermissionsAction(data.data))
            })
            this.parseURL()
        },
        watch: {
            $route (to, from) {
                this.parseURL()
            }
        },
        computed: {
            ...mapGetters('user', [
                'getUser'
            ])
        },
        methods: {
            ...mapActions({
                getEnablePermissionsAction: 'server/getEnablePermissions',
                setEnablePermissionsAction: 'user/setEnablePermissions'
            }),
            parseURL () {
                let paths = this.$route.path.split('/')
                this.urls = []
                let tempPath = ''
                paths.forEach(path => {
                    if (path !== '') {
                        tempPath = tempPath + '/' + path
                        this.urls.push({ title: adminUrlParseMap[path], path: tempPath })
                    }
                })
            },
            goToHome () {
                this.$router.push('/')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .center-flex-box {
        vertical-align: top;
        display: -webkit-inline-flex;
        justify-content: center;
        align-items: center;
    }

    .el-header {
        background-color: #ffffff;
        color: #304156;
        border-bottom: #dadada 1px solid;
        line-height: 50px;
        padding: 0;

        .switch {
            float: left;
            cursor: pointer;
            width: 50px;
            height: 50px;
            background: #ffffff;

            .hide {
                width: 60%;
                height: 60%;
            }
        }

        .nav-bar {
            display: -webkit-inline-flex;
            vertical-align: top;
            justify-content: left;
            align-items: center;
            float: left;
            margin: 0 32px;
            height: 100%;

            .breadcrumb {
                font-size: 16px;
            }
        }

        .title {
            display: -webkit-inline-flex;
            height: 50px;
            line-height: 50px;
            font-size: 22px;
            font-style: italic;
            font-weight: bolder;
        }

        .home {
            float: right;
            margin: 0 16px;
        }
    }
</style>
